<template>
  <div class="game_currency_list">
    <div class="search-box">
      <Row type="flex">
        <Row type="flex"
             justify="start"
             class="search-item-left">
          <Col class="search-item"><span class="search-label">商品名称：</span><Input placeholder="商品名称/商品编码/条形码"
                 @on-keyup='filterSpace'
                 @on-blur="filterSpace"
                 v-model='searchObj.keyword'></Input></Col>
          <Col class="search-item">
          <span class="search-label">游戏币分类：</span>
          <Select v-model="searchObj.type"
                  @on-change="seleted"
                  style="width:180px"
                  placeholder='请选择'>
            <Option v-for="item in typeList"
                    :value="item.typeCode"
                    :key="item.typeCode">{{ item.typeName }}</Option>
          </Select>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  type='primary'
                  @click="search">查询</Button>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  @click="reset">重置</Button>
          </Col>
        </Row>
      </Row>
    </div>
    <Table stripe
           class="table-list"
           :columns="columns"
           :data="tableData"
           :loading="loading"
           :height="tableHeight">
      <template slot-scope="{ row }"
                slot="thumbnail">
        <div><img :src="row.thumbnail?row.thumbnail:defaultUrl"
               style="width: 90px;height: 60px;display: block;margin: 15px 0;"></div>
      </template>
      <template slot-scope="{ row }"
                slot="goodskind">
        <span>{{row.goodsKindList[1].typeName}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="aio">
        <i class="iconsys iconsetting"
           v-if="hasPermission(['moms:product:machinecoinsetting'])&&(row.goodsKindList[1].typeCode==='0104'&&row.goodsKindList[2].typeCode==='010401')||(row.goodsKindList[1].typeCode==='0104'&&row.goodsKindList[2].typeCode==='010403')"
           title="一体机设置"
           @click="setaio(row)"></i>
      </template>
      <template slot-scope="{ row }"
                slot="cashier">
        <i class="iconsys iconsetting"
           v-if="hasPermission(['moms:product:cashiercoinsetting'])"
           title="收银台设置"
           @click="setcashier(row)"></i>
      </template>
      <template slot-scope="{ row }"
                slot="wechatMall">
        <i class="iconsys iconsetting"
           v-if="hasPermission(['moms:product:weixincoinsetting'])&&(row.goodsKindList[1].typeCode==='0104'&&row.goodsKindList[2].typeCode==='010401')||(row.goodsKindList[1].typeCode==='0104'&&row.goodsKindList[2].typeCode==='010403')"
           title="微信商城设置"
           @click="setwechatmall(row)"></i>
      </template>
    </Table>
    <Row type='flex'
         justify="end"
         style='padding: 20px'>
      <Col>
      <Page :total="pageObj.total"
            :page-size='pageObj.pageSize'
            :current='pageObj.pageIndex'
            :page-size-opts='[20,50,100,200]'
            show-total
            show-sizer
            @on-change='changePageIndex'
            @on-page-size-change='changePageSize' />
      </Col>
    </Row>
  </div>
</template>
<script>
import { kindList } from '@/api/goods/index'
import { getsysGoodsList } from '@/api/merchandise/index'
export default {
  name: 'game_currency',
  data () {
    return {
      defaultUrl: require('@/assets/images/default.png'),
      searchObj: {
        keyword: '', // 关键字
        type: '' // 分类
      },
      pageObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      typeList: [],
      loading: false, // 加载的状态
      columns: [
        {
          title: '商品编码',
          key: 'skuId'
        },
        {
          title: '商品主图',
          slot: 'thumbnail'
        },
        {
          title: '商品名称',
          key: 'skuName'
        },
        {
          title: '游戏币分类',
          slot: 'goodskind'
        },
        {
          title: '商品价',
          key: 'standardPrice'
        },
        {
          title: '一体机上下架',
          slot: 'aio'
        },
        {
          title: '收银台上下架',
          slot: 'cashier'
        },
        {
          title: '微信商城',
          slot: 'wechatMall'
        }
      ],
      tableData: []
    }
  },
  watch: {
    '$route' (newRoute) {
      if (newRoute.name === 'game_currency') {
        this.getsysList()
      }
    }
  },
  // 计算属性
  computed: {
    tableHeight () {
      let height = this.tableData.length > 6 ? 580 : 0
      return height
    }
  },
  created () {
    this.getKindList()
    this.getsysList()
  },
  methods: {
    // 获取分类列表
    getKindList () {
      kindList({
        level: 2,
        merchantId: this.$store.state.user.merchantId,
        parentId: '01'
      }).then(res => {
        if (res.data.status === 200) {
          this.typeList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 获取系统商品列表
    getsysList () {
      this.loading = true
      getsysGoodsList({
        merchantId: this.$store.state.user.merchantId,
        sysId: 'xsxt',
        sysGoodsStatus: 0,
        keyword: this.searchObj.keyword,
        goodsKind: this.searchObj.type === '0104' ? '01-0104' : '01',
        goodsKindIdList: (this.searchObj.type !== '0104' && this.searchObj.type) ? ['01' + '-' + this.searchObj.type] : [],
        offset: (this.pageObj.pageIndex - 1) * this.pageObj.pageSize,
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        if (res.data.status === 200) {
          if (res.data.data) {
            this.tableData = res.data.data.goods || []
            this.pageObj.total = res.data.data.total
          } else {
            this.tableData = []
            this.pageObj.total = 0
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 祛除空格
    filterSpace () {

    },
    // 选择分类
    seleted () {
      this.pageObj.pageIndex = 1
      this.getsysList()
    },
    // 查询
    search () {
      this.pageObj.pageIndex = 1
      this.getsysList()
    },
    // 重置
    reset () {
      this.searchObj = {
        keyword: '', // 关键字
        type: '' // 分类
      }
      this.pageObj.pageIndex = 1
      this.getsysList()
    },
    // 改变页码
    changePageIndex (pageIndex) {
      this.pageObj.pageIndex = pageIndex
      this.getsysList()
    },
    // 改变大小
    changePageSize (pageSize) {
      this.pageObj.pageSize = pageSize
      this.getsysList()
    },
    // 一体机设置
    setaio (row) {
      this.$router.push({ name: 'game_currency_aio', query: { id: row.skuId, sysId: row.sysId, type: 1, sysGoodsId: row.sysGoodsId } })
    },
    // 收银台设置
    setcashier (row) {
      this.$router.push({ name: 'game_currency_aio', query: { id: row.skuId, sysId: row.sysId, type: 2, sysGoodsId: row.sysGoodsId } })
    },
    // 微信商城设置
    setwechatmall (row) {
      this.$router.push({ name: 'game_currency_aio', query: { id: row.skuId, sysId: row.sysId, type: 3, sysGoodsId: row.sysGoodsId } })
    }
  }
}
</script>
